<template>
  <section v-if="comData">
    <div class="tab-content">
      <h2 class="title">
        {{ comData.name }}
      </h2>
    </div>
    <component :is="comData.components" :comData="comData"></component>
  </section>
</template>

<script>
// 导入所有组件
const resultComps = {}
let requireComponent = require.context(
  './', // 在当前目录下查找
  false, // 不遍历子文件夹
  /.vue$/ // 正则匹配 以 .vue结尾的文件
)
requireComponent.keys().forEach((fileName) => {
  let comp = requireComponent(fileName)
  resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})

export default {
  name: 'EditForm',
  components: resultComps,
  props: {
    comData: {
      // 这个模块的对象数据
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  methods: {},
}
</script>

<style scoped lang="scss">
.title {
  margin-top: 10px;
}
section {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}
.tab-content {
  padding: 0 15px;
  h2 {
    font-size: 16px;
    color: #333;
  }
}
</style>